<template>
  <div class="login">
    <div class="logo">
        <img  height="64" width="344" :src="logoImgUrl" alt="logo">
    </div>

    <div class="wrapper">
        <div class="container">
          <h1>Welcome</h1>
          <div class="nav">
            <van-field v-model="account" type="text" placeholder="请输入用户名" input-align="center"  left-icon="login iconfont icon-caidan" />
            <van-field v-model="password" type="password" placeholder="请输入密码" input-align="center" left-icon="login iconfont icon-caidan" />
            <div class="code">
              <vue-captcha ref="captcha" :captcha.sync="vertify" @on-change="handleChange"></vue-captcha>
              <van-field v-model="code" type="text" placeholder="请输入验证码" input-align="center"  />
            </div>
            <van-button round type="info" color="#055383" style="width:100px" @click="signin">登录</van-button>
            <p class="text" @click="sign">忘记密码？点此找回密码</p>
          </div> 
        </div>
    </div>
    <!-- 左下角小猫 -->
    <!-- <move-Cat v-if="isShow"></move-Cat> -->

    <!-- footer -->
    <div class="author">江财Mrocifu_自主完成  ©2022</div>

  </div>
</template>

<script>
// import moveCat from '../components/moveCat/moveCat.vue'
import VueCaptcha from "vue-captcha-code";
import { login } from '../api/user'
import {Toast} from 'vant'
export default {
  data() {
    return {
      logoImgUrl:require('../assets/logo.png'),
      account: "",
      password: "",
      vertify: "",
      code:'',

      isShow: true,
    };
  },
  components:{
    // moveCat,
    VueCaptcha
  },
  mounted() {
    this.isShow = true
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if (null === userInfo) return;
    if (userInfo.isLogin) {
      this.isShow = false
      sessionStorage.setItem('AuthorityJudgment', JSON.stringify({
        isLogin: userInfo.isLogin,
        permission: userInfo.permission,
      }))
      sessionStorage.setItem('usedPermission', JSON.stringify({
        usedPermission: userInfo.permission,
        permission: userInfo.permission,
      }))
      let name = ''
      if(userInfo.permission == '超级管理员'){
        name = "superAdmin"
      }else if(userInfo.permission == '管理员') {
        name = "admin"
      }else if(userInfo.permission == '教师'){
        name = "teacher"
      }else if(userInfo.permission == '学生'){
        name = "student"
      }
      console.log(userInfo.permission);
      console.log(name, "path");
      this.$router.push({
        name: name,
        params: userInfo
      });
    }
  },
  methods: {
    async signin(){
      let body ={
        account:this.account,
        password:this.password,
        vertify:this.vertify,
        code:this.code
      }
      // console.log(body)
      await login(body)
        .then(res=>{
          this.isShow = false
          console.log('OK',res)

          // 通过localStorage将 登录信息保存到本地
          let userInfo = {
            isLogin: true,
            account: res.data.account,
            username: res.data.username,
            permission: res.data.permission,
            classes: res.data.classes,
            subject: res.data.subject
          };
          localStorage.setItem('userInfo', JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          // console.log('this.$store.state.userInfo', this.$store.state.userInfo);
          setTimeout(() => {
            console.log('账号已存入本地');
          }, 2000)

          sessionStorage.setItem('AuthorityJudgment', JSON.stringify({
            isLogin: true,
            permission: res.data.permission,
          }))
          sessionStorage.setItem('usedPermission', JSON.stringify({
            usedPermission: userInfo.permission,
            permission: userInfo.permission,
          }))

          let name = ''
          if(res.data.permission == '超级管理员'){
            name = "superAdmin"
          }else if(res.data.permission == '管理员') {
            name = "admin"
          }else if(res.data.permission == '教师'){
            name = "teacher"
          }else if(res.data.permission == '学生'){
            name = "student"
          }

          this.$router.push({
            name: name,
            params: res.data
            });
        })
        .catch(err=>{
          console.log(err);
        })
    },
    sign() {
      this.$router.push("/sign");
    },
    handleChange(code) {
      console.log('code: ', code);
    },
  },
};
</script>

<style lang='stylus'>
.login
  box-sizing border-box
  margin 0
  padding 0
  color white
  font-weight 300
  font-family 'Source Sans Pro', sans-serif
  .logo
    margin 10px
  .author
    position absolute
    bottom 0
    left: 50%;
    transform: translate(-50%, -50%);
    font-size 14px
    color #666  
  .wrapper
    background #50a3a2cc
    position absolute
    width 100%
    height 400px
    margin-top 50px
    .container
        margin 0 auto
        padding 20px
        text-align center
        h1
          margin-top 10px
          font-size 40px
        .nav
          width 300px
          margin auto
          .van-field
            display flex
            appearance none
            outline 0
            border 1px solid #ffffff66
            background-color #ffffff33
            border-radius 3px
            margin-top 15px
            font-size 18px
            color white
            .van-field__body:hover
                background-color #ffffff66
            :focus
                background-color white
                color #53e3a6
          .code
            display flex
            margin-bottom 15px
            canvas
              margin-top 15px

</style>